<template>
	<view class="content" :class="'theme-'+theme">
		<!-- 提示窗示例 -->
		<uni-popup ref="fullCartDialog" type="dialog">
			<view class="uni-tip">
				<text class="uni-tip-title">提示</text>
				<view class="popup-content uni-tip-content">
					购物车装不下啦，请清理后再试！
				</view>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button" @click="closeFullCartDialog()">取消</text>
					<navigator url="/pages/cart/cart" open-type="switchTab" class="uni-tip-button confirm">
					<text  >前往购物车</text>
					</navigator>
				</view>
			</view>
		</uni-popup>
	<view class="addTitle" style="position: fixed;">
      <view class="titleDetail">
        <view class="">
			<image src="../../static/newh5/fanhui.png"
			class="yticon"
			style="width: 13px;height: 20px;color:black"
			@click="returnIndex()"
			></image>
        </view>
        <view class="titleText">
          <b>商品列表</b>
        </view>
        <view class=""  style="color: #269cd3">
        </view>
      </view>
    </view>
		<!-- :style="{position:headerPosition}" -->
		<view class="navbar">
			<view class="nav-item" :class="{current: filterIndex === 0}" @click="tabClick(0)">
				综合排序
			</view>
			<!-- 			<view class="nav-item" :class="{current: filterIndex === 1}" @click="tabClick(1)">
				销量优先
			</view> -->
			<view class="nav-item" :class="{current: filterIndex === 2}" @click="tabClick(2)">
				<text>价格</text>
				<view class="p-box">
					<text :class="{active: sortType === 10 && filterIndex === 2}" class="yticon icon-shang"></text>
					<text :class="{active: sortType === 11 && filterIndex === 2}" class="yticon icon-shang xia"></text>
				</view>
			</view>
			<!-- <text class="cate-item yticon icon-fenlei1" @click="toggleCateMask('show')"></text> -->
		</view>
		<!-- <scroll-view class="product-list" scroll-y :scroll-top="listScrollTop" @scroll="scroll" @scrolltolower="scrollToBottom"> -->
		<view class="product-list">
			<template v-if="showHot">
				<view style="text-align: center;padding: 20rpx 0;line-height: 40rpx;white-space: pre-wrap;">
					{{'很抱歉，未能找到对应商品\n已为您推荐以下商品'}}
				</view>
				<template v-if="hotGoodsList.length>0">
					<view class="product-item" v-for="(item, index) in hotGoodsList" :key="index" @click="navToDetailPage(item)">
						<!-- <image class="left-goodImg" :src="item.thumbnail" mode="aspectFit"></image> -->
						<view class="left">
						<image class="left-goodImg" :src="item.thumbnail" mode="aspectFit"></image>
						<image v-if="hasLogin&&item.remainAmount!=1"  :class="['left','soldout']" src="../../static/outOfStock1.png" mode="aspectFill" lazy-load/>
						</view>
						<view class="right">
							<text class="title more-t">{{item.goodsName}}</text>
							<view class="money-box" v-if="hasLogin">
								<text  class="price">{{'￥'+item.goodsPrice}}</text>
							</view>
							<view class="money-box" v-else>
								<text class="price" style="color: #fa436a;">******</text>
							</view>
							<view class="bottom">
								<text @click.stop="jumpStore(item.supplierId)">{{item.supplierName}}</text>
								<image src="../../static/cart.png" @click.stop="addCart(item)"></image>
							</view>
						</view>
					</view>
				</template>
			</template>
			<template v-else>
				<view class="product-item" v-for="(item, index) in goodsList" :key="index" @click="navToDetailPage(item)">
					<view class="left">
					<image class="left-goodImg" :src="item.skuImage==''?item.goodsImage:item.skuImage" mode="aspectFit"></image>
					<image v-if="hasLogin&&item.remainAmount!=1"  :class="['left','soldout']" src="../../static/outOfStock1.png" mode="aspectFill" lazy-load/>
					</view>
					<!-- <image class="left" :src="item.skuImage==''?item.goodsImage:item.skuImage" mode="aspectFit"></image> -->
					<view class="right">
						<text class="title more-t">{{item.goodsTip}}</text>
						<view class="money-box" v-if="hasLogin">
							<text  class="price">{{'￥'+item.goodsPrice}}</text>
						</view>
						<view class="money-box" v-else>
							<text class="price" style="color: #fa436a;">******</text>
						</view>
						<view class="money-box" style="display: flex;flex-wrap: wrap;" v-if="item.activity&&item.activity.type">
							<template v-if="item.activity.type===1">
								<view class="tag" v-for="(rule, ruleIndex) in item.activity.ruleList" :key="rule.id">
									{{rule.num}}件{{rule.discount}}折
								</view>
							</template>
						</view>
						<view class="bottom">
							<text @click.stop="jumpStore(item.supplierId)">{{item.supplierName}}</text>
							<image src="../../static/cart.png" @click.stop="addCart(item)"></image>
						</view>
					</view>
				</view>
				<uni-load-more :status="loadingType"></uni-load-more>
			</template>
		</view>
		<!-- </scroll-view> -->
		<image class="top-back" src="../../static/top-back.png" v-if="showToTop" @click="toTop()"></image>
		<image class="cart-icon" src="../../static/cart-icon.png" @click="toCart()"></image>
		<view class="cate-mask" :class="cateMaskState===0 ? 'none' : cateMaskState===1 ? 'show' : ''" @click="toggleCateMask">
			<view class="cate-content" @click.stop.prevent="stopPrevent" @touchmove.stop.prevent="stopPrevent">
				<scroll-view scroll-y class="cate-list">
					<view v-for="item in cateList" :key="item.id">
						<view class="cate-item b-b two">{{item.name}}</view>
						<view v-for="tItem in item.child" :key="tItem.id" class="cate-item b-b" :class="{active: tItem.id==cateId}"
						 @click="changeCate(tItem)">
							{{tItem.name}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		jugdeShopSetting
	} from '../../api/hotStores/hotStores.js'
	import {  goback } from "@/common/utils/navigateBack.js";
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import {
		addToCart
	} from '../../api/cart/cart.js'
	import {
		mapState
	} from 'vuex';
	import {qryConfByItemCode} from '@/api/user/user.js'
	import {qryGuessHotGoods, queryGoodsLowestPriceById} from '@/api/order/order.js'
	import {queryDefinedHotGood} from '@/api/index/index.js'
	import {
	getPriceAndAmount,
	constructAreaParams,
	getClassGoodLists
	} from '@/api/product/list.js';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				cateMaskState: 0, //分类面板展开状态
				headerPosition: "fixed",
				headerTop: "44px",
				loadingType: 'more', //加载更多状态
				filterIndex: 0,
				cateId: -1, //已选三级分类id
				sortType: 1, //1 默认
				cateList: [],
				deptInfo: {},
				showToTop: false,
				listScrollTop: 0,
				params: {
					//记录搜索记录关键词
					isRecordKey:false,
					brandIds: [],
					catalogIds: [],
					excludeTags: [],
					goodsName: '',
					isNeedSupplier: "true",
					isQueryCatalog: true,
					isStandard: -1,
					limit: 10,
					page: 1,
					priceMax: null,
					priceMin: null,
					purchaserCatalogIds: [],
					purchaserId: 1,
					searchData: [],
					searchName: "",
					searchType: "3",
					searchWords: '',
					sortType: 1,
					specList: [],
					supplierIds: [],
					supplierName: ""
				},
				goodsList: [],
				// 广州银行-校验商品最低价
				isbuyMinPrice:false,
				showHot:false,
				hotGoodsList:[]
			};
		},
		computed: {
			...mapState(['hasLogin'])
		},
		onLoad(options) {
			if(getApp().globalData.needRefresh){
				getApp().globalData.needRefresh = 0
				location.reload()
				return
			}
			console.log('options',options);
			// 分类跳转
			if (options.tid) {
				this.cateId = options.tid;
				this.params.searchType = '3'
			}
			// 搜索跳转
			if (options.key) {
				this.params.searchType = '1'
				this.params.searchWords = options.key
				this.params.goodsName = options.key
			}

			if(options.isRecordKey){
				this.params.isRecordKey = options.isRecordKey
			}
			//增加搜索关键字
			if(JSON.stringify(options) !== "{}"){
				this.params.goodsName = options.k
				this.params.searchWords = options.k
			}
			// 品牌跳转
			if (options.bId) {
				this.params.brandIds = [options.bId]
			}
			this.loadCateList(options.fid, options.sid);
			this.initParams()
			this.loadData();
			this.getConf()
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			// if (e.scrollTop >= 0) {
			// 	this.headerPosition = "fixed";
			// } else {
			// 	this.headerPosition = "absolute";
			// }
			this.showToTop = e.scrollTop > 100
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadData('refresh', 1);
		},
		//加载更多
		onReachBottom() {
			if(this.loadingType === 'more')
				this.loadData();
		},
		methods: {
			jumpStore(supplierId) {
				jugdeShopSetting({
					code: supplierId
				}).then(res => {
					if (res.code == 0) {
						if (JSON.stringify(res.data) != '{}') {
							uni.navigateTo({
								url: `/pages/hotList/hotStore?id=${res.data.supplierId}`
							})
						} else {
              uni.navigateTo({
                url: `/pages/product/list?key=${item.supplierName}`+`&supplierId=${item.supplierId}`
              })
						}
					}
				})
			},
			loadHotGoods(){
				if(this.hasLogin){
					qryGuessHotGoods({current:1,end:10}).then(res=>{
						if(res.code===0){
							if(res.data&&res.data.length>0){
								res.data.forEach(item=>{
									if(item.goodsImageList&&item.goodsImageList.length>0){
										item.thumbnail = item.goodsImageList[0].url
									}
								})
								this.hotGoodsList = res.data
							}
						}
					})
				}else{
					let hotParam = {
						specialAreaId: 2,
						goodsNum: 10
					}
					queryDefinedHotGood(hotParam).then(response => {
						if (response.code === 0) {
							this.hotGoodsList = response.data
						}
					})
				}
			},
		    async getConf(){
				const deptInfo = uni.getStorageSync('deptinfo')[0]
				qryConfByItemCode({code: "isbuyMinPrice",
					tenant_id: deptInfo.tenantId,
					dept_code: deptInfo.deptCode}).then(res=>{
						if(res.code===0){
							this.isbuyMinPrice = res.data.val == '1'
						}
				})
			},
			returnIndex() {
				goback()
			},
			initParams() {
				this.params.purchaserId = uni.getStorageSync('deptinfo').deptId
				var idsStr = getApp().globalData.categoryIds;
				getApp().globalData.categoryIds = "";
				if (idsStr && idsStr != ''){
					var ids = idsStr.split(',');
					ids.forEach(id => {
						this.params.purchaserCatalogIds.push(id);
						this.params.searchData.push(id)
					});
				}
				if (this.cateId !== -1) {
					this.params.purchaserCatalogIds.push(this.cateId)
					this.params.searchData.push(this.cateId)
				}
			},
			//加载分类
			async loadCateList(fid, sid) {
				let list = await this.$api.json('cateList');
				let cateList = list.filter(item => item.pid == fid);

				cateList.forEach(item => {
					let tempList = list.filter(val => val.pid == item.id);
					item.child = tempList;
				})
				this.cateList = cateList;
			},
			//加载商品 ，带下拉刷新和上滑加载
			async loadData(type = 'add', loading) {
				// debugger
				//没有更多直接返回
				if (type === 'add') {
					if (this.loadingType === 'nomore') {
						return;
					}
					this.loadingType = 'loading';
				} else {
					this.loadingType = 'more'
				}
				if (type === 'refresh') {
					this.params.page = 1;
				}
				console.log('getClassGoodLists',this.params)


				let goodsJson = await getClassGoodLists(this.params)
				let goodsList = goodsJson.goodsList


				var areaId = uni.getStorageSync('areaId')?uni.getStorageSync('areaId'):uni.getStorageSync('enterpriseInfo').areaId;
				if (this.hasLogin && goodsList.length > 0 && areaId != '') {
				  // 已登录的状态才查询库存
				  let queryParams = constructAreaParams(
				      goodsList,
				      1,
				      areaId,
				      // uni.getStorageSync('bizDeptInfo').deptId,
					  uni.getStorageSync('deptinfo')[0].deptId,
				      true,
				      false
				  );
				  // 查询库存
				  let result = await getPriceAndAmount(queryParams);
				  console.log(result)

				  let stocksArr = result.stocks;
				  for (var i = 0; i < goodsList.length; i++) {
				    let amoutObj = stocksArr.find(item => item.protocolGoodsId == goodsList[i].goodsId);
				    if (amoutObj && amoutObj.hasOwnProperty("remainAmount")) {
				      // goodsList[i].remainAmount = amoutObj.remainAmount;
				      // goodsList[i].stockState = amoutObj.stockState;
					   let remainAmount = amoutObj.remainAmount;
					                if(remainAmount != -999 && remainAmount <= 0) {
					                  goodsList[i].remainAmount = 0;
					                }else {
					                  goodsList[i].remainAmount = 1;
					                }
				    }
				  }
				}
				let total = goodsJson.total
				if (type === 'refresh') {
					this.goodsList = goodsList;
				} else {
					this.goodsList = this.goodsList.concat(goodsList);
				}

				//判断是否还有下一页，有是more  没有是nomore
				this.loadingType = this.goodsList.length < total ? 'more' : 'nomore';
				if(this.loadingType === 'more')
					this.params.page += 1;
				if (type === 'refresh') {
					uni.stopPullDownRefresh();
					if (loading === 1) {
						uni.hideLoading()
					} else {
						uni.stopPullDownRefresh();
					}
				}
				if(this.params.page === 1 && this.goodsList.length===0){
					// 加载热销商品
					this.showHot = true
					if(this.hotGoodsList.length===0)
						this.loadHotGoods()
				}else{
					this.showHot = false
				}
			},
			//筛选点击
			tabClick(index) {
				if (this.filterIndex === index && index !== 2) {
					return;
				}
				this.filterIndex = index;
				if (index === 2) {
					this.sortType = this.sortType === 10 ? 11 : 10;
				} else if (index === 0) {
					this.sortType = 0;
				}
				this.params.sortType = this.sortType
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				})
				this.loadData('refresh', 1);
				uni.showLoading({
					title: '正在加载'
				})
			},
			//显示分类面板
			toggleCateMask(type) {
				let timer = type === 'show' ? 10 : 300;
				let state = type === 'show' ? 1 : 0;
				this.cateMaskState = 2;
				setTimeout(() => {
					this.cateMaskState = state;
				}, timer)
			},
			//分类点击
			changeCate(item) {
				this.cateId = item.id;
				this.toggleCateMask();
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				})
				this.loadData('refresh', 1);
				uni.showLoading({
					title: '正在加载'
				})
			},
			//详情
			navToDetailPage(item) {
				let id = item.goodsId;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
			scroll(e) {
				if (e.detail.scrollTop > 20) {
					this.showToTop = true;
					this.listScrollTop = e.detail.scrollTop;
				} else {
					this.showToTop = false;
				}
			},
			scrollToBottom() {
				console.log('触底刷新');
				this.loadData();
			},
			toTop() {
				// this.showToTop = false;
				// this.listScrollTop = 0;
				uni.pageScrollTo({
					scrollTop: 0
				})
			},
			toCart() {
				uni.switchTab({
					url: '/pages/cart/cart'
				})
			},
			addCart(item,isMin=false) {
				if (!this.hasLogin) {
					uni.showModal({
						title: '提示',
						content: '您还未登录，不能进行此操作',
						confirmText: '去登录',
						cancelText: '取消',
						success: (suc) => {
							if (suc.confirm) {
								uni.navigateTo({
									url: '/pages/public/login'
								})
							}
						}
					})
				} else {
					if(this.isbuyMinPrice&&!isMin){
						this.queryLowestPriceGoods(item)
						return
					}
					let pType;
					let qType;
					if (item.goodsSourceType === 0) {
						pType = '02';
						qType = 1;
					} else {
						pType = '01';
						qType = 2;
					}
					var areaId = uni.getStorageSync('areaId')?uni.getStorageSync('areaId'):uni.getStorageSync('enterpriseInfo').areaId;
          			let params = {num:1,goodsId:item.goodsId,areaId:areaId};
					addToCart(params).then(res => {
						if (res.code === 0) {
							this.$util.msg('加入购物车成功')
						} else if(res.code === 1001) {
						let msg = ''
						if(res.extra.productAvailability) {
							msg = res.extra.productAvailability.filter(item => !item.canPurchase).map(item => item.message).toString()
						}
						this.$util.msg(res.message+' '+msg)
					}else {
							if(res.message == '购物车装不下啦，请清理后再试！'){
								this.$refs.fullCartDialog.open()
							} else {
								this.$util.msg(res.message)
							}
						}
					})
				}
			},
			queryLowestPriceGoods(item){
				queryGoodsLowestPriceById({goodsId: item.goodsId,purchaserId: uni.getStorageSync('deptinfo')[0].deptId}).then(response=>{
					if(response.code === 0){
					  let res = response.data;
					  if(res.goodsId) {
						  // 返回商品
						  let lowestPrice = Number(res.goodsPrice)
						  if (lowestPrice < item.goodsPrice){
							//不是最低价商品，需要跳转到新商品
							uni.showModal({
								title:'温馨提示',
								content:'商城存在价格更低的同类商品',
								confirmText:'前往购买',
								showCancel:false,
								success(suc) {
									if(suc.confirm){
										uni.navigateTo({
											url:`/pages/product/product?id=${res.goodsId}`
										})
									}
								}
							})
						  } else {
							this.addCart(item,true)
						  }
					  } else {
						this.addCart(item,true)
					  }
					}else{
						this.addCart(item,true)
					}
				})
			},
			stopPrevent() {},
			// 关闭弹窗
			closeFullCartDialog() {
				this.$refs.fullCartDialog.close()
			}
		},
	}
</script>

<style lang="scss">
	page,
	.content {
		background: $page-color-base;
		height: 100%;
	}

	// .content {
	// 	// margin-top: 80rpx;
	// }

	.navbar {
		position: fixed;
		top: 88rpx;
		// left: 0;
		// position: relative;
		display: flex;
		width: 100%;
		height: 80rpx;
		background: #fff;
		box-shadow: 0 2upx 10upx rgba(0, 0, 0, .06);
		z-index: 9999;
		border-top: 1rpx solid $page-color-base;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30upx;
			color: $font-color-dark;
			position: relative;

			&.current {
				color: $base-color;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120upx;
					height: 0;
					border-bottom: 4upx solid $base-color;
				}
			}
		}

		.p-box {
			display: flex;
			flex-direction: column;

			.yticon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30upx;
				height: 14upx;
				line-height: 1;
				margin-left: 4upx;
				font-size: 26upx;
				color: #888;

				&.active {
					color: $base-color;
				}
			}

			.xia {
				transform: scaleY(-1);
			}
		}

		.cate-item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			width: 80upx;
			position: relative;
			font-size: 44upx;

			&:after {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				border-left: 1px solid #ddd;
				width: 0;
				height: 36upx;
			}
		}
	}

	.product-list {
		// position: relative;
		// height: calc(100% - 100rpx);
		margin-top: 180rpx;
		display: flex;
		// padding-top: 10rpx;
		padding-bottom: env(safe-area-inset-bottom);
		flex-direction: column;

		.product-item {
			display: flex;
			padding: 16rpx 30rpx;
			background-color: #fff;
			// border-radius: 10rpx;
			// margin: 0 10rpx 10rpx 10rpx;

			.left {
				width: 220rpx;
				height: 220rpx;
				border-radius: 10rpx;
				position: relative;
				.left-goodImg {
					width: 100%;
					height: 100%;
					background-color: $border-color-light;
				}
				.soldout {
					position: absolute;
					left: 0;
					top: 0;
				}
			}

			.right {
				flex: 1;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.title {
					height: 40px;
					text-align: left;
					color: $font-color-dark;
					font-size: 14px;
				}

				.money-box {
					text-align: left;

					.tag {
					  align-items: center;
					  padding: 6upx 10upx;
					  border: 1rpx solid #DF3325;
					  font-size: $font-sm;
					  color: #DF3325;
					  border-radius: 6upx;
					  line-height: 1;
					  margin:5rpx 5rpx 5rpx 0
					}

					.integral {
						display: inline-block;
						color: $uni-color-primary;
						font-size: 15px;

						&:before {
							background: url(../../static/money.png) no-repeat;
							width: 22rpx;
							height: 22rpx;
							margin-right: 4rpx;
							display: inline-block;
							content: '';
							background-size: contain;
						}

						&:after {
							margin-left: 4rpx;
							content: '积分';
							color: #909090;
							font-size: 12px;
						}
					}

					.split {
						font-size: 15px;
						color: $base-color;
					}

					.price {
						display: inline-block;
            color: $uni-color-primary;
            font-size: 15px;
					}
				}

				.bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: $font-base;

					text{
						flex: 1;
						white-space: nowrap;
						width: 0;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					image {
						width: 80rpx;
						height: 80rpx;
						margin-left: 20rpx;
					}
				}
			}
		}
	}

	/* 分类 */
	.cate-mask {
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 95;
		transition: .3s;

		.cate-content {
			width: 630upx;
			height: 100%;
			background: #fff;
			float: right;
			transform: translateX(100%);
			transition: .3s;
		}

		&.none {
			display: none;
		}

		&.show {
			background: rgba(0, 0, 0, .4);

			.cate-content {
				transform: translateX(0);
			}
		}
	}

	.cate-list {
		display: flex;
		flex-direction: column;
		height: 100%;

		.cate-item {
			display: flex;
			align-items: center;
			height: 90upx;
			padding-left: 30upx;
			font-size: 28upx;
			color: #555;
			position: relative;
		}

		.two {
			height: 64upx;
			color: #303133;
			font-size: 30upx;
			background: #f8f8f8;
		}

		.active {
			color: $base-color;
		}
	}

	/* 商品列表 */
	.goods-list-view {
		width: 100%;
		height: 810rpx;
	}

	.goods-list {

		display: flex;
		flex-direction: column;
		height: 810rpx;
		align-items: center;

		.goods {
			display: flex;
			flex-wrap: wrap;
			padding: 0 30upx;
			padding-top: 16rpx;
			height: 810rpx;
			// background: #fff;

			.goods-item {
				display: flex;
				flex-direction: column;
				width: 48%;
				background-color: #fff;
				border-radius: 10rpx;
				padding: 16rpx;
				margin-bottom: 20rpx;

				&:nth-child(2n+1) {
					margin-right: 4%;
				}
			}

			.image-wrapper {
				width: 100%;
				height: 300upx;
				border-radius: 3px;
				overflow: hidden;
				background-color: #fff;

				image {
					width: 100%;
					height: 100%;
					opacity: 1;
				}
			}

			.title {
				font-size: 15px;
				height: 40px;
				color: $font-color-dark;
				// line-height: 80upx;
			}

			.bottom {
				width: 100%;
				margin-top: 8rpx;
				display: flex;
				justify-content: space-between;

				.left {
					display: flex;
					flex-direction: column;

					.integral {
						color: $uni-color-primary;
						font-size: 17px;

						&:before {
							background: url(../../static/money.png) no-repeat;
							width: 24rpx;
							height: 24rpx;
							margin-right: 4rpx;
							display: inline-block;
							content: '';
							background-size: contain;
						}

						&:after {
							margin-left: 4rpx;
							content: '积分';
							color: #909090;
							font-size: 12px;
						}
					}

					.price {
            color: $uni-color-primary;
            font-size: 17px;
					}
				}

				.right {
					display: flex;
					align-items: center;

					image {
						width: 80rpx;
						height: 80rpx;
					}
				}
			}

			.price-box {
				margin-top: 8rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-right: 10upx;
				font-size: 24upx;
				color: $font-color-light;
			}

			.price {
				font-size: $font-lg;
				color: $uni-color-primary;
				line-height: 1;

				// &:before {
				// 	content: '￥';
				// 	font-size: 26upx;
				// }
			}
		}
	}

	.cart-icon,
	.top-back {
		width: 85rpx;
		height: 85rpx;
		position: fixed;
		right: 30rpx;
		bottom: 170rpx;
		-webkit-overflow-scroll: touch;
	}

	.top-back {
		bottom: 270rpx;
	}
	.uni-tip {
		overflow: hidden;

		.popup-content {

			.cancel-reason {
				width: 100%;
				height: 102rpx;
				line-height: 100%;
				padding: 16rpx;
				color: #303133;
				font-size: $my-font-size-base;
				border: 1px solid #f5f5f5;
				border-radius: 10rpx;
			}
		}

		.uni-tip-group-button {
			border-top: none;

			.uni-tip-button {
				border-top: 1px solid #e2e2e2;
				display: flex;
				align-items: center;
				line-height: normal;
				justify-content: center;

				&.confirm {
					border-top: 1rpx solid $base-color;
					border-bottom: 1rpx solid $base-color;
					color: #fff;
					background-color: $base-color;
				}
			}
		}
	}
</style>
